<template>
  <view class="root">
    <view class="top-wrapper">
      <view class="content-inner">
        <view class="i-label">
          文字说明:
        </view>
        <u--textarea height="293rpx" :maxlength=" 50" border="none" v-model="form.value" placeholder="请简要描述你发现的问题"
          count></u--textarea>
        <view class="i-label">
          图片证据: <view class="sub-text">（最多可上传3张图片，非必填）</view>
        </view>
        <u-upload :fileList="form.imgUrl" @afterRead="(info) => afterReadFive(info, 'form', 4)"
          @delete="(info) => deletePhoto(info, 'form')" name="imgUrl" :maxCount="3" :multiple="true" width="188rpx"
          height="160rpx">
          <image :src="baseImgUrl + 'upload-icon3.png'" style="width: 188rpx; height: 160rpx"></image>
        </u-upload>
      </view>
    </view>
    <view class="bottom-wrapper">
      <u-button class="custom-style" text="提交证据" @click="handleSubmit" :custom-style="customSubmitStyleFull"></u-button>
    </view>
  </view>
</template>

<script>
  import {
    customSubmitStyleFull,
    getOptionsParams,
    navBack
  } from '@/utils/util.js'

  import _ from '@/utils/lodash.js'
  import uploadFileMixin from '../utils/upload-file-mixin'

  export default {
    mixins: [uploadFileMixin],
    data() {
      return {
        baseImgUrl: this.$baseImgUrl,
        customSubmitStyleFull,
        form: this.initForm(),
        routerParams: {}
      }
    },
    onLoad(options) {
      this.routerParams = getOptionsParams(options)
      console.log(this.routerParams)
      // 如果有检查内容
      if (this.routerParams.improveContent) {
        // 取出内容
        this.form = {
          ...this.routerParams.improveContent
        }
      }
    },
    methods: {
      handleSubmit() {
        uni.$emit('add-evidence', {
          ..._.omit(this.routerParams, ['improveContent']),
          value: this.form
        })
        navBack()
      },
      initForm() {
        return {
          value: '',
          imgUrl: []
        }
      }
    }
  }
</script>

<style>
  page {
    width: 100%;
    height: 100%;
  }
</style>

<style lang="scss" scoped>
  .root {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    background: #F9F9F9;



    .top-wrapper {
      flex: 1;
      overflow: auto;
      margin: 10rpx 0;
      background: #FFFFFF;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      padding: 0 24rpx;

      .content-inner {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 19rpx 40rpx;

        .i-label {
          font-weight: 500;
          font-size: 26rpx;
          color: #333333;
          margin-bottom: 10rpx;
          display: flex;
          align-items: center;
          padding-left: 16rpx;
          position: relative;

          &::before {
            content: '';
            width: 8rpx;
            height: 8rpx;
            background: #BBBBBB;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateX(-50%);
            border-radius: 50%;
          }

          .sub-text {
            font-weight: 400;
            font-size: 24rpx;
            color: #A1A1A1;
          }
        }

        /deep/ .u-textarea {
          background: #F9F9F9;
          margin-bottom: 43rpx;
        }

        /deep/ .input-placeholder {
          font-weight: 400 !important;
          font-size: 26rpx !important;
          color: #BBBBBB !important;
        }

      }
    }

    .bottom-wrapper {
      width: 100%;
      height: 120rpx;
      background: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
</style>